<template>
  <div class="order-container">
    <!-- 订单状态选项卡 -->
    <el-tabs 
      v-model="activeTab" 
      @tab-click="handleTabClick"
      class="order-tabs">
      <el-tab-pane
        v-for="tab in tabs"
        :key="tab.value"
        :label="tab.label"
        :name="tab.value">
      </el-tab-pane>
    </el-tabs>

    <!-- 搜索筛选区域 -->
    <el-card class="filter-card">
      <el-form :model="filterParams" label-width="100px" label-position="left">
        <el-row :gutter="20">
          <!-- 左侧筛选条件 -->
          <el-col :span="8">
            <el-form-item label="商品名称/订单编号">
              <el-input
                v-model="filterParams.keyword"
                placeholder="商品名称/订单编号"
                clearable>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="收货人姓名">
              <el-input
                v-model="filterParams.receiver"
                placeholder="收货人姓名"
                clearable>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="订单状态">
              <el-select
                v-model="filterParams.status"
                placeholder="订单状态">
                <el-option
                  v-for="status in statusOptions"
                  :key="status.value"
                  :label="status.label"
                  :value="status.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="日期范围">
              <el-date-picker
                v-model="filterParams.dateRange"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期">
              </el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
        <!-- 右侧操作按钮 -->
        <el-row :gutter="20">
          <el-col :span="8" :offset="16" class="filter-buttons">
            <el-button @click="handleReset">重置</el-button>
            <el-button 
              type="primary" 
              @click="handleSearch"
              style="background-color: var(--color-base); border-color: var(--color-base)">
              查询
            </el-button>
          </el-col>
        </el-row>
      </el-form>
    </el-card>

    <!-- 订单表格 -->
    <el-card>
      <el-table
        :data="orders"
        style="width: 100%"
        empty-text="您的订单是空的,赶紧去逛逛吧">
        <el-table-column prop="goods" width="180" label="商品"></el-table-column>
        <el-table-column prop="quantity" label="商品数量"></el-table-column>
        <el-table-column prop="price" label="单价"></el-table-column>
        <el-table-column prop="prepay" label="预付金额"></el-table-column>
        <el-table-column prop="remaining" label="剩余待付"></el-table-column>
        <el-table-column prop="total" width="120" label="订单总金额"></el-table-column>
        <el-table-column label="订单状态">
          <template slot-scope="scope">
            <a style="color: var(--color-base)">
              {{ scope.row.status }}
            </a>
          </template>
        </el-table-column>
        <el-table-column prop="receiver" label="收货人"></el-table-column>
        <el-table-column label="操作"fixed="right" width="110">
          <template slot-scope="scope">
            <el-button 
              type="text"
              @click="handleView(scope.row)">
              查看
            </el-button>
            <el-button 
              type="text" 
              style="color: var(--color-base);"
              @click="handleCancel(scope.row)"
              v-if="scope.row.status === '待付款'">
              取消
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 选项卡配置
      tabs: [
        { label: '所有订单', value: 'all' },
        { label: '待付款', value: 'pendingPayment' },
        { label: '待验货', value: 'pendingCheck' },
        { label: '待收货', value: 'pendingReceive' },
        { label: '待结算', value: 'pendingSettle' }
      ],
      activeTab: 'all',
      
      // 筛选参数
      filterParams: {
        keyword: '',
        receiver: '',
        dateRange: [],
        status: ''
      },

      // 订单状态选项
      statusOptions: [
        { value: 'all', label: '全部状态' },
        { value: 'pendingPayment', label: '待付款' },
        { value: 'pendingCheck', label: '待验货' },
        { value: 'pendingReceive', label: '待收货' },
        { value: 'pendingSettle', label: '待结算' }
      ],

      // 订单数据（重新模拟）
      orders: [
        {
          id: '101',
          goods: '笔记本电脑',
          quantity: 1,
          price: '8000',
          prepay: '4000',
          remaining: '4000',
          total: '8000',
          status: '待付款',
          receiver: '李明'
        },
        {
          id: '102',
          goods: '智能手机',
          quantity: 2,
          price: '3000',
          prepay: '6000',
          remaining: '0',
          total: '6000',
          status: '已完成',
          receiver: '王芳'
        },
        {
          id: '103',
          goods: '无线耳机',
          quantity: 5,
          price: '200',
          prepay: '1000',
          remaining: '500',
          total: '1500',
          status: '待验货',
          receiver: '赵丽'
        },
        {
          id: '104',
          goods: '智能手表',
          quantity: 1,
          price: '2500',
          prepay: '1250',
          remaining: '1250',
          total: '2500',
          status: '待收货',
          receiver: '张伟'
        },
        {
          id: '105',
          goods: '平板电脑',
          quantity: 1,
          price: '4500',
          prepay: '2250',
          remaining: '2250',
          total: '4500',
          status: '待结算',
          receiver: '孙强'
        },
        {
          id: '106',
          goods: '智能音箱',
          quantity: 3,
          price: '400',
          prepay: '1200',
          remaining: '0',
          total: '1200',
          status: '已完成',
          receiver: '周敏'
        }
      ]
    }
  },

  methods: {
    // 选项卡切换
    handleTabClick(tab) {
      this.$message({
        message: `切换至${tab.label}选项卡，功能待完善`,
        type: 'info'
      })
      // 这里预留数据请求接口
    },

    // 搜索查询
    handleSearch() {
      this.$message({
        message: '执行查询操作，功能待完善',
        type: 'info'
      })
    },

    // 重置筛选
    handleReset() {
      this.filterParams = {
        keyword: '',
        receiver: '',
        dateRange: [],
        status: ''
      }
      this.$message({
        message: '已重置筛选条件',
        type: 'success'
      })
    },

    // 查看订单详情
    handleView(order) {
      this.$message({
        message: `查看订单${order.id}，功能待完善`,
        type: 'info'
      })
    },

    // 取消订单
    handleCancel(order) {
      this.$message({
        message: `取消订单${order.id}，功能待完善`,
        type: 'info'
      })
    },

  }
}
</script>

<style scoped>

/* 选项卡样式 */
.order-tabs >>> .el-tabs__item {
  font-size: 16px;
  height: 50px;
  line-height: 50px;
}

.order-tabs >>> .el-tabs__active-bar {
  background-color: var(--color-base);
  height: 3px;
}

.order-tabs >>> .el-tabs__item.is-active {
  color: var(--color-base);
}

/* 筛选卡片 */
.filter-card {
  margin: 20px 0;
}

.filter-buttons {
  text-align: right;
  padding-right: 10px;
}

/* 空状态样式 */
.el-table__empty-block {
  padding: 40px 0;
}
</style>